$(function () {
  // 封装获取数据的函数
  function getCommentList() {
    $.ajax({
      method: 'GET',
      url: 'http://www.liulongbin.top:3006/api/cmtlist',
      success: function (res) {
        if (res.status !== 200) return alert('获取评论列表失败！')
        // ①看看数据结构,哪个数据是我们要渲染的
        const arr = res.data;
        // ②遍历这个数组
        let html = '';
        arr.forEach(item => {
          const { content, username, time } = item;
          // ③找出模板中哪些是需要替换的数据
          html += `<li class="list-group-item">
                    <span class="badge" style="background-color: #F0AD4E;">评论时间：${time}</span>
                    <span class="badge" style="background-color: #5BC0DE;">评论人：${username}</span>
                    ${content}
                  </li>`
        });
        //④渲染
        $('#cmt-list').html(html)
      }
    })
  }
  getCommentList()
  //封装获取数据的函数
  function getCommentList() {
    $.ajax({
      method: 'GET',
      url: 'http://www.liulongbin.top:3006/api/cmtlist',
      success: function (res) {
        if (res.status !== 200) return alert('获取评论列表失败！')
        // 看看数据结构 哪个数据是我们要渲染的
        const arr = res.data;
        //遍历这个数组
        let html = '';
        arr.forEach(item => {
          const { content, username, time } = item;
          //找出模板中哪些是需要替换的数据
          html += `<li class="list-group-item">
                  <span class="badge" style="background-color: #F0AD4E;">评论时间：${time}</span>
                  <span class="badge" style="background-color: #5BC0DE;">评论人：${username}</span>
                  ${content}
                  </li>`
        });
        // 渲染
        $('#cmt-list').html(html)
      }
    })
  }
  $('#formAddCmt').submit(function (e) {
    e.preventDefault()
    var data = $(this).serialize()
    //发送请求
    $.ajax({
      type: "post",
      url: "http://www.liulongbin.top:3006/api/addcmt",
      data: data,
      // dataType: "dataType",
      success: function (res) {
        if (res.status == 201) {
          alert('发表成功!')
          getCommentList()
          // 获取form表单-->DOM元素 调用reset方法,可以清空表单内容
          $('#formAddCmt')[0].reset()
        }
        else alert('发表失败!')
        alert('发表成功')
        getCommentList()
        //获取form表单 转成 dom元素 调用reset方法 可以清空表单内容
        $('#formAddCmt')[0].reset()
      }

    });
  })
})
